<template>
  <div>
    <div>
      <div class="articleItem-wrapper">
        <!-- 电影海报 -->
        <div class="articleImg">
          <img :src="`http://10.36.4.254:8080${cinema.poster}`" />
        </div>
        <div class="articleDes">
          <div class="desTitle">
            <span>{{ cinema.name }}</span>
          </div>
          <div class="desContent">
            <!-- <span v-if="value">我评：</span> -->
            <span
              ><van-rate
                v-model="value"
                readonly
                allow-half
                void-icon="star"
                void-color="#eee"
                color="#FFD700" /></span
            >&nbsp;
            <!-- <span >{{ value * 2 }}分</span> -->
          </div>
          <div>
            <span>快来评论吧</span>
            <!-- <span>{{ comment }}</span> -->
          </div>
          <van-divider />
          <div></div>
        </div>
        <div class="btn">
          <div>
            <button @click="grade">评分</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["cinema"],

  data() {
    return {
      value:1,
      // //接受传递过来的分数，并转化为浮点数
      // value: parseFloat(this.$route.query.value),
      // comment: this.$route.query.comment,
    };
  },

  methods: {
    grade() {
      this.$router.push("/me/grade");
    },
  },
};
</script>

<style>
.articleItem-wrapper {
  display: flex;
  width: 100%;
}
.articleImg {
  margin-right: 15px;
  margin-left: 15px;
  width: 74px;
}
.articleImg img {
  width: 74px;
  height: 112px;
  border: 1px solid rgb(160, 155, 155);
  border-radius: 5px;
}
.articleDes {
  width: 80%;
  font-size: 14px;
  overflow: hidden;
  font-weight: 400;
  text-overflow: ellipsis;
  line-height: 1.6rem;
  letter-spacing: normal;
  color: rgb(106, 106, 107);
}
.desTitle {
  margin-bottom: 1rem;
  font-size: 20px;
  padding-top: 7px;
  color: black;
}
.btn {
  width: 90px;
}
.btn button {
  width: 60px;
  height: 30px;
  margin-top: 2.5rem;
  background-color: rgb(247, 54, 54);
  color: aliceblue;
  border: 1px solid red;
  border-radius: 15px;
  margin-right: 10px;
}
</style>
